<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 申请发票 开发者: 麦沃德科技-半夏  
+---------------------------------------------------------------------- -->

<template>
	<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
	<view class="container" :style="{'--theme-color': themeColor}" v-if="loadEnd">
		<!-- 主体内容 -->
		<view class="container-main">
			<view class="main-title">
				<view class="title-box" v-if="selectTitle && selectTitle.id">
					<view class="box-head flex align-items-center">
						<view class="head-label flex-item text-ellipsis">
							<text v-if="selectTitle.invoice_type == 1">普通发票 抬头-{{selectTitle.title_type == 1 ? "个人" : "单位"}}</text>
							<text v-else-if="selectTitle.invoice_type == 2">专用发票</text>
						</view>
						<view class="head-btn" @click="changeTitle">
							<view class="btn-bg"></view>
							<text class="btn-text">更换抬头</text>
						</view>
					</view>
					<view class="box-info">
						<view class="info-title text-ellipsis">{{selectTitle.invoice_title}}</view>
						<view class="info-subtitle text-ellipsis">{{selectTitle.mobile}}</view>
					</view>
				</view>
				<view class="title-select" @click="changeTitle" v-else>选择抬头</view>
			</view>
			<view class="main-item">
				<view class="item-title">金额</view>
				<view class="item-input flex align-items-center">
					<view class="input flex-item" :style="{color: themeColor}">{{orderPrice}}</view>
					<view class="unit">元</view>
				</view>
			</view>
			<view class="main-item">
				<view class="item-title">备注信息</view>
				<view class="item-input">
					<textarea class="textarea" type="text" maxlength="-1" v-model="remarks" placeholder="请输入备注信息" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="container-footer">
			<view class="footer-btn" @click="handleSubmit()">提交申请</view>
			<view class="safe-padding"></view>
		</view>
		<!-- 更换抬头弹窗 -->
		<modal-title ref="modalTitle" @onChange="pageChange" @confirm="setSelectTitle"></modal-title>
	</view>
</template>

<script>
	import modalTitle from "@/pages/passenger/component/modal/title.vue"
	import { mapState } from "vuex"
	export default {
		components: {
			modalTitle,
		},
		data() {
			return {
				// 加载完成
				loadEnd: false,
				// 页面是否阻止滚动
				pageShow: false,
				// 订单id
				orderId: null,
				// 默认抬头
				selectTitle: null,
				// 订单总金额
				orderPrice: "0.00",
				// 备注
				remarks: "",
			}
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
		onLoad(option) {
			this.orderId = option.id
			this.orderPrice = option.price
			uni.showLoading({
				title: "加载中"
			})
			this.getDefaultTitle(() => {
				uni.hideLoading()
				this.loadEnd = true
			})
		},
		methods: {
			// 改变页面滚动状态
			pageChange(state) {
				this.pageShow = state
			},
			// 获取默认抬头
			getDefaultTitle(fn) {
				this.$util.request("passenger.invoice.title.default").then(res => {
					if (fn) fn()
					if (res.code == 1) {
						this.selectTitle = res.data || null
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					if (fn) fn()
					console.error('获取默认抬头 ', error)
				})
			},
			// 更换抬头
			changeTitle() {
				if (this.selectTitle && this.selectTitle.id) this.$refs.modalTitle.open(this.selectTitle.id)
				else this.$refs.modalTitle.open()
			},
			// 设置选择的抬头
			setSelectTitle(value) {
				this.selectTitle = value
			},
			// 提交申请
			handleSubmit() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				if (!this.selectTitle || !this.selectTitle.id) {
					uni.showToast({
						icon: "none",
						title: "请选择抬头"
					})
					return
				}
				this.$util.request("passenger.invoice.apply", {
					order_id: this.orderId,
					title_id: this.selectTitle.id,
					remarks: this.remarks,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.$util.toPage({
							mode: 2,
							path: "/pages/passenger/mine/invoice/success",
							isToken: true,
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('申请发票 ', error)
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 112rpx;

		.container-main {
			padding: 32rpx;

			.main-title {
				border-radius: 16rpx;
				overflow: hidden;
				padding: 4rpx;
				background: linear-gradient(180.00deg, var(--theme-color) -100%, #ffffff 100%);

				.title-box {
					border-radius: 16rpx;
					background: #fff;

					.box-head {
						padding: 16rpx 32rpx;
						border-bottom: 1px solid #F6F7FB;

						.head-label {
							color: #242629;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.head-btn {
							position: relative;
							z-index: 1;
							border-radius: 8rpx;
							padding: 8rpx 16rpx;
							overflow: hidden;

							.btn-bg {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								background: var(--theme-color);
								opacity: .05;
							}

							.btn-text {
								color: var(--theme-color);
								font-size: 24rpx;
								line-height: 34rpx;
							}
						}
					}

					.box-info {
						padding: 32rpx;

						.info-title {
							color: #242629;
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}

						.info-subtitle {
							margin-top: 16rpx;
							color: #ACADB7;
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}
				}

				.title-select {
					border-radius: 16rpx;
					background: #fff;
					color: var(--theme-color);
					font-size: 28rpx;
					line-height: 40rpx;
					padding: 48rpx 0;
					text-align: center;
				}
			}

			.main-item {
				margin-top: 32rpx;

				.item-title {
					color: #242629;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
				}

				.item-input {
					margin-top: 24rpx;
					border-radius: 16rpx;
					background: #ffffff;

					.input {
						padding: 36rpx 32rpx;
						color: #242629;
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.textarea {
						width: 100%;
						height: 240rpx;
						padding: 36rpx 32rpx;
						color: #242629;
						font-size: 28rpx;
						line-height: 40rpx;
						box-sizing: border-box;
					}

					.placeholder {
						color: #ACADB7;
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.unit {
						color: #242629;
						font-size: 28rpx;
						line-height: 40rpx;
						margin-left: 24rpx;
						padding-right: 32rpx;
					}
				}
			}
		}

		.container-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			padding: 12rpx 32rpx;
			background: #ffffff;
			border-top: 1rpx solid #F6F7FB;

			.footer-btn {
				color: #ffffff;
				font-size: 32rpx;
				line-height: 44rpx;
				padding: 22rpx 24rpx;
				border-radius: 40rpx;
				text-align: center;
				background: var(--theme-color);
			}
		}
	}
</style>